$(function(){
    //获取地址栏中的参数，键为keyWord的值
    // console.log(location.search);
    //es6 中有一个对象可以帮助获取地址栏中参数的值
    //以location.search作为参数创建这个对象
    var x = new URLSearchParams(location.search);

    //通过这个对象的get方法就可以获取到键名为keyWord的值
    var value = x.get("keyWord");
    // console.log(value);

    //声明两个全局变量用来保存页码和每页的数据条数
    var currentPage = 1;
    var pageSize = 2;
    //声明两个全局变量用来保存排序的方式
    var price = 2;
    var num = 2;

    //根据搜索的关键字请求搜索产品的接口，获取到产品的数据
    //渲染到页面中展示
    $.ajax({
        url:"/product/queryProduct",
        data:{
            page:currentPage,
            pageSize:pageSize,
            proName:value,
            price:price,
            num:num
        },success:function(result){
            console.log(result);
            //结合模板和数据生成html字符串
            var str = template("product",result);
            $(".list").html(str);
        }
    })

    //添加初始化上拉加载组件的代码
    mui.init({
        pullRefresh : {
            container:".xxx",
            up : {
            height:50,//可选.默认50.触发上拉加载拖动距离
            auto:false,//可选,默认false.自动上拉加载一次
            contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
            contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
                callback :function(){
                    var that = this;
                    //上拉加载之后应该请求下一页的数据
                    currentPage++;
                    $.ajax({
                        url:"/product/queryProduct",
                        data:{
                            page:currentPage,
                            pageSize:pageSize,
                            proName:value,
                            price:price,
                            num:num
                        },success:function(result){
                            console.log(result);
                            //结合模板和数据生成html字符串
                            var str = template("product",result);
                            $(".list").append(str);
                            //判断请求回来的result有没有数组，如果没有数据，则调用endPullupToRefresh，并传参true
                            if(result.data.length == 0){
                                that.endPullupToRefresh(true);
                            }else{
                                that.endPullupToRefresh(false);
                            }
                            
                        }
                    })

                    
                    //this.endPullupToRefresh(boolean);这个方法的参数如果为true，表示后续没有其他数据了
                    //如果这个方法的参数为false，表示后续有加载到更多的数据
                    // console.log("callback被调用了");
                    // setTimeout(function(){
                        
                    //     that.endPullupToRefresh(false);
                    // },3000);
                    
                } 
            }
        }
    });

    //添加排序功能
    $(".filter>div").eq(0).on("tap",function(){
        price = ( price == 2?1:2 );
        if(price == 1){
            $(this).find("span").attr("class","mui-icon mui-icon-arrowup");
        }else if(price == 2){
            $(this).find("span").attr("class","mui-icon mui-icon-arrowdown");
        }
        //清空所有商品
        $(".list").html("");
        //将页码重置为1
        currentPage = 1;
        //重置上拉加载组件
        mui('.xxx').pullRefresh().refresh(true);
        //按照现在的排序方式，重新发送请求
        $.ajax({
            url:"/product/queryProduct",
            data:{
                page:currentPage,
                pageSize:pageSize,
                proName:value,
                price:price,
                num:num
            },success:function(result){
                console.log(result);
                //结合模板和数据生成html字符串
                var str = template("product",result);
                $(".list").html(str);
            }
        })
        
    })
    //数量排序
    $(".filter>div").eq(1).on("tap",function(){
        num = ( num == 2?1:2 );
        if(num == 1){
            $(this).find("span").attr("class","mui-icon mui-icon-arrowup");
        }else if(num == 2){
            $(this).find("span").attr("class","mui-icon mui-icon-arrowdown");
        }
        
    })

})